Vue

2023-07-09 05:47| 来源: 网络整理| 查看: 265

文章目录一、事件监听语法二、v-on的基本使用三、v-on的语法糖四、v-on的参数1. **如果函数需要参数, 但是没有传入, 那么函数的形参为`undefined`**2. **如果在事件定义时, 写函数时省略了小括号, 但是方法本身是需要一个参数的, 这个时候Vue会默认传递`event`**3. 方法定义时, 我们需要event对象, 同时又需要其他参数五、v-on修饰符1. 阻止事件冒泡**加stop修饰符之前****加stop修饰符之后** 2. 阻止默认行为3. 阻止默认行为,没有表达式4. 串联修饰符5. 键修饰符, 键别名6. 键修饰符, 键代码7. 点击回调只会触发一次

一、事件监听

如果我们想监听用户的点击, 拖拽, 键盘事件等, 可以使用v-on指令

语法

v-on:事件=" 操作 "

二、v-on的基本使用 {{counter}} + - const app = new Vue({ el: '#app', data: { counter: 0 }, methods: { add() { this.counter++ }, sub() { this.counter-- } }, }) 三、v-on的语法糖

把 v-on: 替换为 @ , 比如v-on:click=" " , 用语法糖写就是 @click=" "

{{counter}} + - const app = new Vue({ el: '#app', data: { counter: 0 }, methods: { add() { this.counter++ }, sub() { this.counter-- } }, }) 四、v-on的参数 1. 如果函数需要参数, 但是没有传入, 那么函数的形参为undefined 点击 const app = new Vue({ el: "#app", data: {}, methods: { add(name) { console.log(name); } } }) 2. 如果在事件定义时, 写函数时省略了小括号, 但是方法本身是需要一个参数的, 这个时候Vue会默认传递event 点击 const app = new Vue({ el: "#app", data: {}, methods: { add(event) { console.log(event); } } }) 3. 方法定义时, 我们需要event对象, 同时又需要其他参数

通过$event可以获取到浏览器参数的event对象

点击 const app = new Vue({ el: "#app", data: {}, methods: { add(name, event) { console.log(name); console.log(event); } } }) 五、v-on修饰符

v-on修饰符可以进行一些事件处理.

1. 阻止事件冒泡

加stop修饰符之前点击 const app = new Vue({ el: "#app", data: {}, methods: { btnClick() { console.log("按钮点击事件"); }, divClick() { console.log("div按钮点击事件"); } } })

在这里插入图片描述

加stop修饰符之后点击 const app = new Vue({ el: "#app", data: {}, methods: { btnClick() { console.log("按钮点击事件"); }, divClick() { console.log("div按钮点击事件"); } } })

在这里插入图片描述

2. 阻止默认行为

const app = new Vue({ el: "#app", data: {}, methods: { inputClick() { console.log("自己提交"); } } }) 3. 阻止默认行为,没有表达式

4. 串联修饰符

5. 键修饰符, 键别名

只当事件是从特点键触发时才触发回调

const app = new Vue({ el: "#app", data: {}, methods: { onEnter() { console.log("回车"); } } }) 6. 键修饰符, 键代码

7. 点击回调只会触发一次

点击只触发一次 const app = new Vue({ el: "#app", data: {}, methods: { oncClick() { console.log("只触发一次"); } } })

【本文地址】

公司简介

联系我们